<template>
  <div style="width:100%;text-align: center;">
    <el-button-group style="margin-top:10px">
      <el-button type="primary" @click="changePdfPage(1)">下一页</el-button>
      <el-button type="primary" @click="changePdfPage(0)">上一页</el-button>
      <el-button type="primary" @click="scaleD">放大</el-button>
      <el-button type="primary" @click="scaleX">缩小</el-button>
    </el-button-group>
    <div class="main">
      <!-- {{ currentPage }} / {{ pageCount }} -->
      <pdf
        ref="wrapper"
        :src="src"
        :page="currentPage"
        class="pdf"
        @progress="loadedRatio = $event"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler"
      />
      <!-- <button @click="changePdfPage(1)">+</button> -->
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf

  },
  data() {
    return {
      currentPage: 1,
      pageCount: 0,
      src: 'http://localhost:8080/support/attachment/1299902286096314370/download', // pdf文件地址
      scale: 100, // 放大系数
      idx: -1,
      clauseTitle: '',
      loadedRatio: 0
    }
  },
  created() {
    this.src = pdf.createLoadingTask(this.src)
  },
  mounted() { },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 放大
    scaleD() {
      this.scale += 5
      // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + '%'
    },

    // 缩小
    scaleX() {
      if (this.scale === 100) {
        return
      }
      this.scale += -5
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + '%'
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
